<template>
  <Modal v-model="modal" title="添加经销商" width='1000' class="dealer-change-modal" :mask-closable="false" @on-ok="onSave" @on-cancel="onModalCancel">
    <div class="address-change-box">
      <p class="label">省</p>
      <Select class="w200" v-model="form.provinceId" @on-change="onChangeProvince">
        <Option v-for="(item, index) in addressData" :key="index" :value="item.id">{{item.value}}</Option>
      </Select>
      <p class="label">市</p>     
      <Select class="w200" v-model="form.cityId" @on-change="onChangeCity" v-show="cityData.length">
        <Option v-for="(item, index) in cityData" :key="index" :value="item.id">{{item.value}}</Option>
      </Select>
      <p class="label" v-show="areaData.length">区</p>
      <Select class="w200" v-model="form.areaId" v-if="areaData.length">
        <Option v-for="(item, index) in areaData" :key="index" :value="item.id">{{item.value}}</Option>
      </Select>
      <Button type="primary" size="middle" class="ml" @click="onGetDistirbutor">加载经销商</Button>
    </div>
    <div class="dealer-change-box">
      <div class="left-info">
        <div class="tab">
          <Checkbox :disabled="!caggiageDealerList.length" v-model="isAllSelect" @on-change="onChangeAllSelect">全选</Checkbox>
          <p>当前经销商</p>
        </div>
        <div class="content">
          <ul>
            <li v-for="(item, index) in caggiageDealerList" :key="index" @click="onJoinSelectData(index, item, $event)" :class="[isAll ? 'disabled-li' : '']">
              <span :class="['check-span', isAll ? 'check-disable' : '']"></span>{{item.value}}
            </li>
          </ul>
        </div>
      </div>
      <div class="right-info">
        <div class="tab">
          <p>已选经销商</p>
          <Button type="warning" @click="onCancel" :disabled="!caggiageDealeredList.length">全部取消</Button>
        </div>
        <div class="content">
          <ul>
            <li v-for="(item, index) in caggiageDealeredList" :key="index" @click="deleteSelectData(index, item)" :class="['checkboxed-li', isAll ? 'disabled-li' : '']">
              <span :class="['check-span','checked-span', isAll ? 'check-disable' : '']"></span>{{item.value}}
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="dealer-page mt">
      <Page :current="current" :total="caggiageTotal" :page-size="20" @on-change="onPageChange"/>
    </div>
  </Modal>
</template>
<script>
import { mapGetters, mapActions, mapMutations } from 'vuex'
export default {
  props: {
    distributorIdsAll: {
      type: Array,
      default: () => []
    },
    isShop: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isAllSelect: false,
      modal: false,
      form: {
        provinceId: null,
        cityId: null,
        areaId: null
      },
      current: 1,
      addressData: [],
      cityData: [],
      areaData: [],
      index: 0,
      type: ''
    }
  },
  mounted() {
    this.getOperDealerList({current: 1})
    this.getAllAddress()
  },
  methods: {
    ...mapActions([
      'getOperDealerList',
      'setEditDealerData',
      'ajaxAddress'
    ]),
    ...mapMutations([
      'initDealeredList'
    ]),
    onOpen(index, type, distributorDTOS) {
      this.modal = true
      this.index = index
      this.type = type
      this.current = 1
      this.form.provinceId = null
      this.form.cityId = null
      this.form.areaId = null
      this.$store.commit('fillDealeredList', distributorDTOS || [])
      this.onPageChange(1)
    },
    deleteSelectData(index, item) {
      this.$store.commit('deleteDealer', {index: index, item: item})
    },
    onJoinSelectData(index, item) {
      if (this.isShop && this.distributorIdsAll.includes(item.id)) {
        this.$Notice.warning({
          title: '该经销商已经被选中过'
        })
        return
      }
      this.$store.commit('joinDealer', {index: index, item: item})
    },
    onChangeAllSelect() {
      this.isAllSelect = true
      this.$store.commit('onChangeAllDealer')
    },
    onCancel() {
      if (!this.caggiageDealeredList.length) return
      this.isAllSelect = false
      this.$store.commit('onCancelAllDealer')
    },
    onPageChange(number) {
      this.current = number
      this.isAllSelect = false
      let param = {
        current: this.current,
        provinceId: this.form.provinceId == 0 ? '' : this.form.provinceId, 
        cityId: this.form.cityId == 0 ? '' : this.form.cityId,
        areaId: this.form.areaId == 0 ? '' : this.form.areaId
      }
      this.getOperDealerList(param).then(() => {
        this.setEditDealerData()
      })
    },
    getAllAddress() {
      this.ajaxAddress().then(res => {
        this.addressData = (res || []).map(item => {
          return {
            id: item.id,
            value: item.name
          }
        })
        this.addressData.unshift({
          value: '请选择',
          id: 0
        })
      })
    },
    onChangeProvince(id) {
      let param = {
        value: this.form.provinceId
      }
      this.ajaxAddress(param).then(res => {
        this.cityData = (res || []).map(item => {
          return {
            id: item.id,
            value: item.name
          }
        })
        this.cityData.unshift({
          value: '请选择',
          id: 0
        })
      })
      this.form.cityId = null
      this.form.areaId = null
      this.areaData = []
    },
    onChangeCity() {
      let param = {
        value: this.form.cityId
      }
      this.ajaxAddress(param).then(res => {
        this.areaData = (res || []).map(item => {
          return {
            id: item.id,
            value: item.name
          }
        })
        this.areaData.unshift({
          value: '请选择',
          id: 0
        })
      })
      this.form.areaId = null
    },
    onGetDistirbutor() {
      this.onPageChange(1)
    },
    onModalCancel() {
      this.modal = false
    },
    onSave() {
      let obj = {
        caggiageDealeredList: this.caggiageDealeredList,
        index: this.index,
        type: this.type
      }
      this.$emit('onComplete', obj)
    }
  },
  computed: {
    ...mapGetters([
      'caggiageDealerList',
      'caggiageDealeredList',
      'caggiageTotal'
    ])
  }
}
</script>

